Dynamic styles with HTML, CSS, and Javascript

Styles can be dynamically changed in 4 ways:

• With Javascript (overrides all other styles)

  el = document.getElementById('pageBody');
el.style.backgroundColor = 'red';

• Inline styles (override both embedded and external styles)

  Inline styles are styles that are written directly in the tag on the document. Inline styles affect only the tag they are applied to.

<a href="" style="font-size:91%;">

• Embedded styles (overrides external styles)

  Embedded styles are styles that are embedded in the head of the document. Embedded styles affect only the tags on the page they are embedded in.

<style type="text/css">
body { color: #FFFFFF; }
</style>

• External styles (.css page)

  External styles are styles that are written in a separate document and then attached to various Web documents. External style sheets can affect any document they are attached to.

<link rel="stylesheet" type="text/css" href="layout.css" />